<template>
  <div class="table">
    <div class="table-child">
      <span>需要的原材料：</span>
      <el-table :data="foodData" border >
        <el-table-column prop="foodName" label="食材"> </el-table-column>
        <el-table-column
          prop="ratio"
          label="原料比例"
          align="center"
          :formatter="formatRatio"
        >
        </el-table-column>
        <el-table-column
          prop="needWeight"
          label="所需食材量"
          align="center"
          :formatter="formatWeight"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="table-child">
      <span>需要添加的营养：</span>
      <el-table :data="nutritionData" border >
        <el-table-column prop="name" label="所需营养"> </el-table-column>
        <el-table-column
          prop="ratio"
          label="原料比例"
          align="center"
          :formatter="formatRatio"
        >
        </el-table-column>
        <el-table-column
          prop="needWeight"
          label="所需量"
          align="center"
          :formatter="formatWeight"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style scoped lang="scss" src="./index.scss" />
